<template>
  <div class="knowinfo">
    <div class="goback" @click="gobackknowledge()">《返回</div>
    <div class="content_body">
      <div class="info">
        <h2>{{ title }}</h2>
        <h3>描述信息：{{ info }}</h3>
        内容：
        <div v-html="content"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: "",
      title: "",
      info: ""
    };
  },
  mounted() {
    this.getstringdata();
  },
  methods: {
    gobackknowledge() {
      this.$router.go(-1);
    },
    formatRichText(html) {
      let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
        match = match
          .replace(/style="[^"]+"/gi, "")
          .replace(/style='[^']+'/gi, "");
        match = match
          .replace(/width="[^"]+"/gi, "")
          .replace(/width='[^']+'/gi, "");
        match = match
          .replace(/height="[^"]+"/gi, "")
          .replace(/height='[^']+'/gi, "");
        return match;
      });
      newContent = newContent.replace(/style="[^"]+"/gi, function(
        match,
        capture
      ) {
        match = match
          .replace(/width:[^;]+;/gi, "width:100%;")
          .replace(/width:[^;]+;/gi, "width:100%;");
        return match;
      });
      newContent = newContent.replace(/<br[^>]*\/>/gi, "");
      newContent = newContent.replace(
        /\<img/gi,
        '<img style="width:100%;height:auto;display:block;margin:10px 0;"'
      );
      return newContent;
    },
    async getstringdata() {
      this.$axios
        .get("api/knowledge/" + this.$route.query.id)
        .then(({ data }) => {
          let {
            data: { title, content, info }
          } = data;
          content = content.replace(/%/g, "%25");
          content = this.formatRichText(decodeURIComponent(content));
          this.title = title;
          this.info = info;
          this.content = content
        });
    }
  },
};
</script>

<style scoped>
.knowinfo {
  padding: 30px;
}

.goback {
  margin-bottom: 20px;
  transition: 1s;
}

.goback:hover {
  margin-bottom: 20px;
  color: blue;
  cursor: pointer;
}

.title {
  margin-bottom: 20px;
}

.content {
  text-indent: 2em;
  line-height: 30px;
}
.content_body {
  margin: 0 auto;
  width: 100%;
  height: auto;
  /* justify-content: center;
  text-align: center; */
  /* background-color: aquamarine; */
}
.info {
  width: 90%;
  height: auto;
  /* background-color: aqua; */
}
h2 {
  text-align: center;
}
</style>
